import { lazyReportBatch } from '../export';

const observeEvent = () => {
  // 定义一个处理函数，用于处理性能观察器返回的条目列表
  const entryHandler = (list) => {
    // 获取性能观察器返回的所有条目
    const data = list.getEntries();
    // 遍历所有条目
    for (const entry of data) {
      // 如果观察器存在，则断开观察器的连接
      if (observer) {
        observer.disconnect();
      }

      // 整理性能指标到一个对象中
      const reportData = {
        // 资源的名字
        name: entry.name,
        // 类型
        type: 'performance',
        // 类型(resource)
        subType: entry.entryType,
        // 资源类型('script', 'img', 'css', "iframe", 'other', 'fetch')
        sourceType: entry.initiatorType,
        // 加载时间
        duration: entry.duration,
        // dns解析时间
        dns: entry.domainLookupEnd - entry.domainLookupStart,
        // tcp连接时间
        tcp: entry.connectEnd - entry.connectStart,
        // 重定向时间
        redirect: entry.redirectEnd - entry.redirectStart,
        // 首字节时间
        ttfb: entry.responseStart,
        // 请求协议
        protocol: entry.nextHopProtocol,
        // 响应内容大小
        responseBodySize: entry.encodedBodySize,
        // 响应头大小
        responseHeaderSize: entry.transferSize - entry.encodedBodySize,
        // 请求内容大小
        transferSize: entry.transferSize,
        // 资源解压后的大小
        resourceSize: entry.decodedBodySize,
        // 开始时间
        startTime: performance.now(),
        title: '静态资源加载指标',
      };
      // 将整理好的性能指标对象打印到控制台
      console.log(reportData, 'reportData');
      lazyReportBatch(reportData);
    }
  };
  // 创建一个性能观察器实例，传入处理函数
  const observer = new PerformanceObserver(entryHandler);
  // 开始观察资源加载的性能指标
  observer.observe({ type: ['resource'], buffered: true });
};

/**
 * 加载静态资源
 */
const observeEntries = () => {
  // 检查文档是否已经完全加载
  if (document.readyState === 'complete') {
    // 如果文档已经加载完成，直接调用 observeEvent 函数
    observeEvent();
  } else {
    // 定义一个 onLoad 函数，用于在窗口加载完成后调用 observeEvent 函数
    const onLoad = () => {
      observeEvent();
      // 移除 onLoad 函数，避免重复调用
      window.removeEventListener('load', onLoad, true);
    };
    // 添加 onLoad 函数到窗口的 load 事件监听器中，当文档加载完成时触发 onLoad 函数
    window.addEventListener('load', onLoad, true);
  }
};

export default observeEntries;
